Page{
  background:#dedede;
}
.container{
  position: relative;
  padding: 0;
  height: 100%;
}
.content{
  width: 100%;
  position: absolute;
  top: 106rpx;

}
.container .top{
  width: 750rpx;
  height: 345rpx;
  position: fixed;
  left: 0;
}
.content .mid_top{
  width: 662rpx;
  position: absolute;
  /* top: 202rpx; */
  left: 50%;
  transform: translate(-50%);
  font-size: 18px;
}
.mid_top .mid_top_con{
  width: 662rpx;
  height: 276rpx;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  top: 27rpx;
  left: 50%;
  transform: translate(-50%);
}
.mid_top_con .user_info{
  width: 662rpx;
  height: 235rpx;
  position: absolute;
  top: -5rpx;
  left: 50%;
  transform: translate(-50%);
}
.mid_top_con .user_info .user_head{
  width: 178rpx;
  height: 178rpx;
  position: absolute;
  top: -100rpx;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%;
  border: 1px solid #dedede;
  background: #fefefe;
}
.mid_top_con .user_info .mid_username{
  position: absolute;
  top: 85rpx;
  left: 50%;
  transform: translate(-50%);
  font-size:32rpx;
  width: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.mid_top_con .user_info .login{
    position: absolute;
    top: 85rpx;
    left: 50%;
    transform: translate(-50%);
    font-size:32rpx;
    width: 50%;
    border: none;
    background: transparent;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}
.mid_top_con .user_info .login::after {
  border: none;
}

.mid_top_con .mid_usercard{
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-around;
  font-size:34rpx;
}
.content .mid_mid{
  width: 662rpx;
  background: #fff;
  position: absolute;
  top: 330rpx;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  border-radius: 8px;
}
.mid_mid .order{
  text-align: left;
  padding: 25rpx 29rpx 25rpx 25rpx;
  width: 85%;
  position: relative;
  display: inline-block;
}
.mid_mid .order:not(:first-of-type){
  border-top: 1px solid #dedede;
}
.mid_mid .order .icon_order{
  display: inline-block;
  width: 34rpx;
  height: 37rpx;
  margin-right: 20rpx;
  vertical-align:bottom;
}
.mid_mid .order .my_order{
  display: inline-block;
  vertical-align: top;
  font-size:31rpx;
}
.mid_mid .order .icon_right{
  position: absolute;
  right: 37rpx;
  width: 19rpx;
  height: 43rpx;
  display: inline-block;
}
.content .mid_bot{
  width: 662rpx;
  background: #fff;
  position: absolute;
  top: 646rpx;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  border-radius: 8px;
  margin-bottom: 21rpx;
}
.mid_bot .order{
  text-align: left;
  padding: 25rpx 29rpx 25rpx 25rpx;
  width: 85%;
  position: relative;
  display: inline-block;
}
.mid_bot .order:not(:first-of-type){
  border-top: 1px solid #dedede;
}
.mid_bot .order .icon_order{
  display: inline-block;
  width: 34rpx;
  height: 37rpx;
  margin-right: 20rpx;
  vertical-align: bottom;
}
.mid_bot .order .my_order{
  display: inline-block;
  font-size: 31rpx;
  vertical-align: top;
}
.mid_bot .order .icon_right{
  position: absolute;
  right: 37rpx;
  width: 19rpx;
  height: 43rpx;
  display: inline-block;
}